<template>
  <div class="bookCity statusBar">
    <van-search :placeholder="placeholder" shape="round" background="#00bb86" @click="goToSearch" />
    <div class="box" v-if="isReady">
      <van-tabs v-model="active" title-active-color="#333" color="#00bb86">
        <!-- 主分类 -->
        <van-tab :title="item.title" v-for="(item, index) in rankCategoryData" :key="index">
          <!-- 次分类 -->
          <div class="item" v-for="(ritem, rindex) in rankCategoryDetailsData" :key="rindex">
            <!-- 次分类标题 -->
            <div class="title" @click="goToClass" v-if="item.data.length > 0">{{ritem.title}}</div>
            <!-- 书籍盒子 -->
            <div class="content">
              <!-- 每本书
              <div class="book-item" v-for="(ritem, rindex) in item2.books" :key="rindex" @click="goToBookDetails(ritem._id)">
                <img class="b-img" :src="ritem.cover" alt="">
                <div class="b-title one-text">{{ritem.title}}</div>
                <div class="b-author one-text">{{ritem.author}}</div>
              </div> -->
              <!-- 每本书 -->
              <div class="book-item" v-for="(ritem2, rindex2) in ritem.data" :key="rindex2" @click="goToBookDetails(ritem2._id)">
                <img class="b-img" :src="ritem2.cover" alt="">
                <div class="b-title one-text">{{ritem2.title}}</div>
                <div class="b-author one-text">{{ritem2.author}}</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BookCity',

    data() {
      return {
        placeholder: '斗破苍穹',
        // 导航栏
        active: 0,
        // 排名分类数据
        rankCategoryData: [
          {
            title: '男生',
            data: [],
            index: 0
          },
          {
            title: '女生',
            data: [],
            index: 0
          },
          {
            title: '出版',
            data: [],
            index: 0
          },
        ],
        // 排名分类详情数据
        rankCategoryDetailsData: [],
        // 排名分类详情数据最大数量
        limit: 6,
        // 数据是否已加载完
        isReady: false,
        count: 0
      }
    },

    created() {
      this.getRankCategoryData();
    },

    watch: {
      // 监听切换分类数据
      active() {
        this.rankCategoryDetailsData = [];
        // console.log(this.rankCategoryData[this.active]);return
        this.rankCategoryData[this.active].data.forEach(v => {
          this.getRankCategoryDetailsData(v._id, v);
        })
      },
    },

    methods: {
      // 跳转到搜索页
      goToSearch() {
        this.$router.push({name: 'Search'});
      },
      
      // 获取分类数据
      getRankCategoryData() {
        this.axios.get('rank-category', {})
        .then(res => {
          // console.log('getRankCategoryData res', res);
          if(res.status === 200) {
            this.rankCategoryData.forEach(v => {
              // 处理男生分类数据
              if(v.title == '男生') {
                let arr = [];
                // 只截取部分分类
                res.data.male.forEach(b => {
                  if(b.shortTitle == '最热榜' || b.shortTitle == '好评榜') {
                    arr.push(b);
                  }
                  if(b.shortTitle == 'VIP榜') {
                    arr.unshift(b);
                  }
                })
                v.data = arr;
                v.key = 'male';
              }
              // 处理女生分类数据
              if(v.title == '女生') {
                let arr = [];
                // 只截取部分分类
                res.data.female.forEach(b => {
                  if(b.shortTitle == '最热榜' || b.shortTitle == '好评榜') {
                    arr.push(b);
                  }
                  if(b.shortTitle == 'VIP榜') {
                    arr.unshift(b);
                  }
                })
                v.data = arr;
                v.key = 'female';
              }
              // 处理出版分类数据
              if(v.title == '出版') {
                v.data = res.data.picture;
                v.key = 'picture';
              }
            })
            // 循环将子分类id和子分类传入
            this.rankCategoryData[0].data.forEach(v => {
              this.getRankCategoryDetailsData(v._id, v);
            })
          }
        }).catch(err => {
          console.log('err', err);
        })
      },

      // 获取分类详情数据
      getRankCategoryDetailsData(typeId, parent) {
        // console.log('parent',parent);
        this.axios.get(`rank/${typeId}`, {})
        .then(res => {
          // console.log('getRankCategoryDetailsData res', res);
          if(res.status === 200) {
            // // 如果此次请求没有数据则不显示
            // if(res.data.ranking.books.length <= 0) return;
            // 限制数量
            let arr = res.data.ranking.books.slice(0, this.limit);
            // 处理图片
            arr.forEach(v => {
              v.cover = decodeURIComponent(v.cover.split('/')[2]);
            })
            // 给子分类添加一个books字段并记录书籍数据
            parent.books = [...arr];

            let obj = {
              data: arr,
              title: parent.title
            }
            this.rankCategoryDetailsData.push(obj);
            // console.log('this.rankCategoryDetailsData',this.rankCategoryDetailsData);

            // 判断异步加载的数据是否全部完成
            this.count++;
            if(this.count >= 3) {
              this.isReady = true;
              this.count = 0;
              // console.log('this.rankCategoryData',this.rankCategoryData);
            }
          }
        }).catch(err => {
          console.log('err', err);
        })
      },

      // 转到分类页
      goToClass() {
        this.$router.push({name: 'Class'});
      },

      // 转到书籍详情页
      goToBookDetails(bookId) {
        this.$router.push({name: 'BookDetails', query: {bookId}});
      },
    }
  }
</script>

<style lang="less" scoped>
::v-deep .van-tab--active {
  font-weight: bold;
}
.box {
  position: fixed;
  top: 54px + 28px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow-y: auto;
}
.item {
  padding: 15px 0;
  .title {
    position: relative;
    padding: 15px;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    &::after {
      position: absolute;
      top: 50%;
      right: 15px;
      content: '更多>';
      color: #ccc;
      font-size: 13px;
      font-weight: normal;
      transform: translateY(-50%);
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px;
    .book-item {
      padding: 10px;
      width: 33.333333%;
      box-sizing: border-box;
      .b-img {
        width: 90px;
        height: 120px;
        // border-radius: 2px;
        box-shadow: 2px 2px 2px #aaa;
      }
      .b-title {
        margin-top: 5px;
        color: #333;
        font-size: 14px;
      }
      .b-author {
        color: #999;
      }
    }
  }
}
</style>